<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8" ref="refbut">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <div style="display: flex; float: right;" v-show="isShow">
            <el-button v-if="showCategory" type="primary" plain icon="el-icon-arrow-up" size="mini" @click="fold">折叠
            </el-button>
            <el-button v-else type="primary" plain icon="el-icon-arrow-down" size="mini" @click="expand">展开
            </el-button>
          </div>
          <el-row :gutter="10" class="mb8" ref="refbut" v-show="showCategory" style="width: 95%; position: relative;">
            <div class="searchCheck">
              <el-row :gutter="10" class="mb8" ref="refbut">
                <el-col :span="1.5">
                  <el-button type="primary" plain @click="fullIndex" v-show="isShow"
                    v-hasPermi="['es:api:completeIndex']">全量索引
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="primary" plain @click="rebuildIndex" v-show="isShow"
                    v-hasPermi="['es:api:insertDoc']">重建索引
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="primary" plain @click="incrementalIndex" v-show="isShow"
                    v-hasPermi="['es:api:cincrementIndex']">增量索引
                  </el-button>
                </el-col>
              </el-row>
            </div>
            <div class="searchCheck">
              <div style="width: 8%">
                <label style="width: 80%; display: inline-block; text-align-last: justify;">全宗名称</label>
                <font style="width: 10%;vertical-align: top; display: inline-block;">：</font>
              </div>
              <div style=" flex-wrap: wrap; width: 90%" :style="isSize">
                <el-select v-model="qzh" placeholder="请选择" @change="onqzhChangeTap($event)">
                  <el-option v-for="i in qzhList" :key="i.FONDS_CODE" :label="i.FONDS_NAME" :value="i.FONDS_CODE">
                  </el-option>
                </el-select>
                <div v-if="archivesCategory.length>0&&qzh != '-1'" style="margin-top:5px;margin-bottom:15px; max-height: 140px; overflow-y: auto;">
                <div class="block" v-for="(item, index) in archivesCategory" :key="item.value"
                  @click="handleClickArchives(index, item)"
                  :style="{ color: item.color, backgroundColor: item.backgroundColor }">
                  {{ item.label }}
                </div>
              </div>
              </div>
            </div>
            <queryCriteriaList v-if="listFrom.length > 0"  :showSearch="showSearch" :listFrom="listFrom"
              @resetQuery="resetQuery" @handleQuery="handleQuery" ref="queryForm"></queryCriteriaList>
          </el-row>
          <div class="showtable">
            <el-row :gutter="10" class="mb8" ref="refbut" style="width: 95%;">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="createIndex" v-show="isShow"
                  v-hasPermi="['es:api:insertDoc']">创建(或重建)索引
                </el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" @click="deleteIndex" v-show="isShow"
                  v-hasPermi="['es:api:dropIndex']">删除索引
                </el-button>
              </el-col>
            </el-row>
            <tableList v-if="tableHeight && tableHeaderList.length > 0" :tableHeaderList="tableHeaderList"
              @handleSelectionChange="handleSelectionChange" :tableData="tableData" :loading="loading"
              :tableHeight="tableHeight" @sortChange="sortChange"></tableList>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  cincrementIndex, dropIndex,
  getCategoryList,
  getQueryList,
  getShowList,
  insertDoc,
  queryFileList,
  completeIndex
} from "@/api/archive/indexMaintenance";
import {getqzhList} from "@/api/archive/retrieval/catalogueSearch";
import queryCriteriaList from "@/components/queryCriteriaList/index.vue"
import tableList from "@/components/tableList/index.vue";

export default {
  name: "index",
  components: { queryCriteriaList, tableList },
  data() {
    return {
      showSearch: true,
      showCategory: true,
      // 档案门类
      archivesCategory: [],
      archivesCategoryIndex: -1,
      listFrom: [], //查询框列表
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        menuId: this.$route.meta.menuId
      },
      tableHeight: "",
      tableHeaderList: [], //table表头数据
      tableData: [],//table列表数据
      total: 0,
      loading: false,
      // 选中数组
      ids: [],
      keys: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      fileTableName: null,
      isShow: true,
      isnoClick: true,
      qzhList: [],
      qzh:""
    }
  },
  computed: {
    isSize() {
      if (this.$store.getters.size == 'small') {
        this.size = 'font-size: 12px;'
      } else {
        this.size = 'font-size: 14px;'
      }
      return this.size
    }
  },
  created() {
    this.getqzhListPost();
    this.getCategory()
    this.getSearch()

    if (this.archivesCategory.length != 0) {
      this.archivesCategory[0].color = '#5377d7';
      this.archivesCategory[0].backgroundColor = '#e1eaff';
      this.archivesCategoryIndex = 0
    }
  },
  methods: {
    //全宗号列表
    getqzhListPost() {
      getqzhList(this.$route.meta.menuId).then(res => {
        if (res.code == 200) {
          this.qzhList = res.data;
          this.qzh = res.data[0].FONDS_CODE;
          this.queryParams.qzh = res.data[0].FONDS_CODE;
          this.getCategory()
          this.getSearch()
          this.getTableList()
        }
      })
    },
    //全宗号列表下拉事件
    onqzhChangeTap(val) {
      this.queryParams.qzh = val;
      this.showSearch = false;
      if(val=="-1"){
        // 元数据方案id
      this.queryParams.groupId = undefined
      // 门类id
      this.queryParams.categoryId = undefined
      }
      this.getCategory()
      this.getSearch()
      this.getTableList()

    },
    //动态设置table的高度
    tableHeightData() {
      this.$nextTick(
        () => {
          let h = document.documentElement.clientHeight
          h = h - 200
          if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
            h = h - this.$refs.queryForm.$el.offsetHeight
          }

          if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
            h = h - this.$refs.refbut.$el.offsetHeight
          }
          this.tableHeight = h > 480 ? h : 480 // 根据自己项目定高度
          return h
        }
      )
    },
    //折叠事件
    fold() {
      this.showCategory = false
    },
    //展开事件
    expand() {
      this.showCategory = true
    },
    // 获取门类
    getCategory() {
      this.archivesCategory = [{
        label: "全部",
        color: 'black',
        backgroundColor: 'white'
      }]
      getCategoryList({menuId:this.$route.meta.menuId,qzh:this.queryParams.qzh}).then(response => {
        // if (response.data.length == 0) {
        //   this.isShow = false
        // } else {
        //   this.isShow = true
        // }
        var data = response.data.map(item => {
          return {
            // 门类id
            value: item.ID,
            // 门类名称
            label: item.NAME,
            // 元数据方案id
            id: item.GROUP_ID,
            // 类型
            type: item.TYPE,
            color: 'black',
            backgroundColor: 'white'
          }
        })
        this.archivesCategory = this.archivesCategory.concat(data)
        if (this.archivesCategory.length != 0) {
          this.archivesCategory[0].color = '#5377d7';
          this.archivesCategory[0].backgroundColor = '#e1eaff';
          this.archivesCategoryIndex = 0
        }
        this.fileTableName = response.data.map(item => item.FILE_TABLE_NAME);
      })

    },
    // 档案门类变换
    handleClickArchives(index, value) {

      if (this.archivesCategoryIndex !== -1) {
        // 恢复上次点击的div为黑色并去掉下划线
        this.archivesCategory[this.archivesCategoryIndex].color = 'black';
        this.archivesCategory[this.archivesCategoryIndex].backgroundColor = 'white';
      }
      // 将当前点击的div变为蓝色并添加下划线
      this.archivesCategory[index].color = '#5377d7';
      this.archivesCategory[index].backgroundColor = '#e1eaff';

      // 更新archivesCategoryIndex
      this.archivesCategoryIndex = index;
      // 元数据方案id
      this.queryParams.groupId = value.id
      // 门类id
      this.queryParams.categoryId = value.value
      // 类型
      // this.queryParams.type = value.type
      // 菜单id
      this.queryParams.menuId = this.$route.meta.menuId
      // label
      this.label = value.label
      this.getSearch()
      this.getTableList()

    },
    // 搜索条件
    getSearch() {
      if (this.queryParams.categoryId != undefined && this.queryParams.menuId != undefined) {

        getQueryList(this.queryParams).then(response => {
          this.listFrom = response.data;
          this.showSearch=true;
        })
      }else{
        this.listFrom=[];
      }
    },
    // 表头
    getTableList() {
      getShowList(this.queryParams).then(response => {
        this.tableHeaderList = response.data;
        console.log(response.data)
        var fields = []
        for (var i in response.data) {
          fields.push(response.data[i].FIELD_NAME)
        }
        this.queryParams.fileField = fields.toString()
        this.getList()
      })
    },
    handleQuery(searchcolumn) {
      if (searchcolumn != undefined && searchcolumn.length != 0) {
        var column = searchcolumn.filter(item => {
          return item.value !== ''
        })
        this.queryParams.queryParameters = column
      } else {
        this.queryParams.queryParameters = []
      }
      this.getList();
    },
    resetQuery() {
      this.queryParams.queryParameters = undefined
      this.getList();
    },
    //是否选择数据
    handleSelectionChange(ids, single, multiple, selection) {
      this.ids = selection.map(item => item.DA_ID);
      this.single = single;
      this.multiple = multiple;
      // 行id
      this.keys = selection.map(item => {
        return {
          id: item.DA_ID,
          fileTableName: item.SUB_TABLE_NAME
        }
      })

    },
    getList() {
      queryFileList(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
        this.tableHeightData();
      })
    },
    //排序
    sortChange(val) {
      // console.log(val, "ksdfjkl")
      this.queryParams.order = val;
      // console.log(this.queryParams, "+++")
      this.getList();
    },
    // 全量索引
    fullIndex() {
      if (this.isnoClick) {
        this.isnoClick = false
        this.$modal.msgWarning('正在创建索引...')
        completeIndex(this.fileTableName).then(response => {
          // this.$modal.msgSuccess(response.msg)
        })
        setTimeout(() => {
          this.isnoClick = true
        }, 2000)
      } else {
        this.$modal.msgWarning('重复点击,请稍后再试')
      }

    },
    // 重建索引
    rebuildIndex() {
      if (this.isnoClick) {
        this.isnoClick = false
        var nameList = this.fileTableName.map(item => {
          return {
            fileTableName: item
          }
        })
        insertDoc(nameList).then(response => {
          this.$modal.msgSuccess("创建完毕")
        })
        setTimeout(() => {
          this.isnoClick = true
        }, 2000)
      } else {
        this.$modal.msgWarning('重复点击,请稍后再试')
      }
    },
    // 增量索引
    incrementalIndex() {
      if (this.isnoClick) {
        this.isnoClick = false
        cincrementIndex(this.fileTableName).then(resposne => {
          this.$modal.msgSuccess("创建完毕")
        })
        setTimeout(() => {
          this.isnoClick = true
        }, 2000)
      } else {
        this.$modal.msgWarning('重复点击,请稍后再试')
      }
    },
    // 创建(或重建)索引
    createIndex() {
      const key = this.keys
      if (key.length == 0) {
        this.$modal.msgWarning("请选择至少一条数据")
      } else {
        insertDoc(key).then(response => {
          this.getList();
          this.$modal.msgSuccess("创建完毕")
        })
      }
    },
    // 删除索引
    deleteIndex() {
      const id = this.ids
      if (id.length == 0) {
        this.$modal.msgWarning("请选择至少一条数据")
      } else {
        this.$modal.confirm('是否确认删除所选数据项？').then(function () {
          return dropIndex(id)
        }).then(response => {
          this.getList();
          this.$modal.msgSuccess(response.msg);
        }).catch(() => {
        });

      }
    },

  }
}
</script>

<style lang="scss" scoped>
.searchCheck {
  //margin: 15px auto 0px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  line-height: 36px;
}

.block {
  padding: 3px 8px 3px 8px;
  white-space: nowrap;
  border-radius: 2px;
  border: solid 1px #e3e3e3;
  // font-size: 15px;
  text-align: center;
  margin: 0 8px 4px 0;
  display: inline-table;
  line-height: 25px;
}
</style>
